import Taro, {Component, Config} from "@tarojs/taro";
import { View, ScrollView, Image, Text } from "@tarojs/components";
import Tabbar from "../../components/Tabbar";
import {inject, observer} from "@tarojs/mobx";
import {IStoreProps} from '../../store/Stores'
import {getRuntime, pageSize, subtime} from '../../utils/common'
import {toJS} from "mobx";

import './index.less'
import share_icon from '../../assets/img/share_arrow.png'

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Index extends Component<IHomeProps>{
  constructor(props){
    super(props)
  }

  state = {
    pageIndex: 1,
    pageSize: pageSize,
    totalCount: 0,
    items: [],
    currentDynamicTypeId: 1,
    dynamicType: [
      {id: 1, name: '行业资讯'},
      {id: 2, name: '集团动态'},
      {id: 3, name: '福利政策'},
    ]
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'动态' })
    this.getAllDynamic()
    this.getAllDynamicType()
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  changeDynamicType(currentDynamicTypeId:number) {
    this.setState({
      currentDynamicTypeId
    }, () => {
      this.getAllDynamic()
    })
  }

  getAllDynamic(): void {
    let dynamicStore = this.props.stores.DynamicStore
    let { pageIndex,pageSize,currentDynamicTypeId } = this.state
    dynamicStore.getAllDynamic({
      dynamicType: currentDynamicTypeId,
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({totalCount: toJS(res.totalCount), items: toJS(res.items)})
        }else {
          const { items } = this.state;
          items.push(...res.items || []);
          this.setState({totalCount: res.totalCount, items})
        }
      }
    })
  }
  // 获取动态类型
  getAllDynamicType(): void {
    let dynamicStore = this.props.stores.DynamicStore
    dynamicStore.getAllDynamicType({
      callback: res => {
        this.setState({
          dynamicType: toJS(res.items)
        })
      }
    })
  }

  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getAllDynamic()
      })
    }
  }

  render() {
    let { items, dynamicType, currentDynamicTypeId }  = this.state
    let [firstItem, ...item2] = items

    return(
      <View className='dynamic-index'>
        <ScrollView className='scroll-view-nav' scrollX>
          {
            dynamicType.map(item => {
             return(
               <View className={item.id == currentDynamicTypeId ? 'scroll-item scroll-item-on' : 'scroll-item'} key={item.id}
                     onClick={this.changeDynamicType.bind(this, item.id)}
               >{item.typeName}<Text className='line' /></View>
             )
            })
          }
        </ScrollView>

        <View className='interval' />
        {items.length>0&&
        <View className='content-30'>
           <View className='recommend' onClick={this.handelRouter.bind(this, '/pages/dynamic/detail?id='+firstItem.id)}>
              <Image src={firstItem.logo} className='img' />
              <Text className='title'>{firstItem.title}</Text>
           </View>

          {
            item2.length>0&&
           <View className='list-wrap'>
             {
                item2.map(item => {
                return(
                  <View className='item' onClick={this.handelRouter.bind(this, '/pages/dynamic/detail?id='+item.id)}>
                    <View className='l'>
                      <Text className='title'>{item.title}</Text>
                      <Text className='date'>{subtime(item.creationTime)}</Text>
                    </View>
                    <Image src={item.logo} className='img' />
                  </View>
                )
               })
             }
           </View>
          }
          {item2.length<=0&&<View className='page-none-info'>暂无更多信息...</View>}
        </View>
        }
        {
          !items&&
          <View className='page-none-info'>暂无更多信息...</View>
        }
        <Tabbar currentTab='dynamic' />
      </View>
    )
  }
}

export default Index
